<template>
  <div class="container">
    <div class="content w wow animate__zoomIn" data-wow-duration="2s">
      <h3>Call To Action</h3>
      <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <a href="#">Call To Action</a>
    </div>
  </div>
</template>

<script>
export default {
  mounted(){
    this.$wow.init()
  }
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  background: linear-gradient(
      rgba(103, 176, 209, 0.8),
      rgba(103, 176, 209, 0.8)
    ),
    url(./images/cta-bg.jpg) fixed center center;
  background-size: cover;
  padding: 60px 0;
  height: 280px;
  width: 100%;
  .content {
    text-align: center;
    color: #fff;
    h3 {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    a {
      font-family: "Raleway", sans-serif;
      text-transform: uppercase;
      font-weight: 500;
      font-size: 16px;
      letter-spacing: 1px;
      display: inline-block;
      padding: 8px 28px;
      border-radius: 25px;
      transition: 0.5s;
      margin-top: 10px;
      border: 2px solid rgba(255, 255, 255, 0.5);
      color: #fff;
      margin-top: 26px;
      &:hover{
          border-color: #fff;
      }
    }
  }
}
</style>